<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/basic.css" />
    <title>27-节点操作</title>
    <style>
      .container {
        width: 100vw;
        height: 100vh;
        background-color: pink;
        padding: 10px;
        box-sizing: border-box;
      }
      .content {
        width: 100%;
        height: 75%;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;
      }
      .input {
        width: 100%;
        height: 20%;
        position: relative;
        margin-top: 20px;
      }
      .input textarea {
        width: 100%;
        height: 100%;
        position: absolute;
        box-sizing: border-box;
        resize: none;
        padding: 10px;
      }

      .input button {
        width: 80px;
        height: 30px;
        border-radius: 7px;
        position: absolute;
        right: 10px;
        bottom: 5px;
        font-size: 16px;
        background-color: coral;
        color: #fff;
        border: coral;
      }
      .input button[disabled] {
        background-color: gray;
        cursor: not-allowed;
        /* 鼠标悬停时的光标样式为 not-allowed */
      }
      .message {
        color: cornflowerblue;
        font-weight: bolder;
        font-size: 30px;
        margin-right: 20px;
      }
      .datetime {
        color: #000;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="content"></div>
      <div class="input">
        <textarea name="" id="contantArea"> </textarea>
        <button id="btnSend">发送</button>
      </div>
    </div>
    <script>
      // 在输入框上的文字显示在content内容上
      // 点击发送需要做一个按动的效果
      // 1.创建三个对象:聊天区对象、输入框对象、发送按钮对象
      const btnDom = document.querySelector("#btnSend"); //发送按钮对象
      const textareaDom = document.querySelector("#contantArea");
      const contentDom = document.querySelector(".content");
      enableBtn();
      // 绑定输入框的 input 事件
      textareaDom.addEventListener("input", enableBtn);
      // 绑定发送按钮的 click 事件
      btnDom.addEventListener("click", sendMsg);
      //   btnDom.addEventListener("click", () => {
      //     sendMsg()
      //   })
       // 绑定输入框的 keydown 事件
       textareaDom.addEventListener('keydown',(event)=>{
        if (event.key === 'Enter' && !event.shiftKey) {
          event.preventDefault(); // 阻止默认的换行行为
          sendMsg();
        }
      });
      function enableBtn() {
        if (textareaDom.value.trim()) {
          // 删除disabled属性
          //   btnDom.removeAttribute("disabled");
          btnDom.disabled = false;
        } else {
          // 加上属性
          //   btnDom.setAttribute("disabled", true);
          btnDom.disabled = true;
        }
      }
      function sendMsg() {
        const content = textareaDom.value.trim(); // 聊天信息
        if(content){
          const p = document.createElement("p"); // 创建一个元素
        p.innerHTML = `<span class='message'>${content}</span><span class='datetime'>${new Date().toLocaleString()}</span>`;
        contentDom.append(p); // append用于指定的节点添加到父节点的子节点列表的末尾。
        textareaDom.value = "";   
        }
      }
    </script>
  </body>
</html>
